<template>
  <div>
    <Header title='TabBar案例'></Header>
    <div class="app">
      <component :is='comName'></component>
    </div>
    <MyTabBar :tabs='tabList' @gaoliang='gaoFN'></MyTabBar>
  </div>
</template>

<script>
  import Header from "./components/MyHeader"
  // import MyTable from "./components/MyTable"
  import MyTabBar from "./components/MyTabBar"

  import Mygoodlist from "./views/Mygoodlist"
  import Mysearch from "./views/Mysearch"
  import Userinfo from "./views/Userinfo"
  export default {
    components: {
      Header,
      MyTabBar,
      // MyTable
      Mygoodlist,
      Mysearch,
      Userinfo
    },
    data() {
      return {
        comName: 'Mygoodlist',
        tabList: [{
            iconText: "icon-shangpinliebiao",
            text: "商品列表",
            componentName: "Mygoodlist"
          },
          {
            iconText: "icon-sousuo",
            text: "商品搜索",
            componentName: "Mysearch"
          },
          {
            iconText: "icon-user",
            text: "我的信息",
            componentName: "Userinfo"
          }
        ]
      }
    },
    methods: {
      gaoFN(index) {
        this.comName = this.tabList[index].componentName
      }
    }
  }
</script>

<style scoped>
  .app {
    padding: 50px 0;
  }
</style>